<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
import { getSystemStatusApi } from '@/api/role'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { ElTag, ElProgress } from 'element-plus'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { ContentWrap } from '@/components/ContentWrap'
import { BaseButton } from '@/components/Button'
// import { asyncRouterMap } from '@/router'
const { t } = useI18n()

interface systemDt {
  usingStorage: number
  totalStorage: number
  stationNo: string
  stationName: string
  isOnline: number
  cpucontent: number
  memoryContent: number
  stationIp: string
}

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getSystemStatusApi({
      pageNo: unref(currentPage),
      pageRow: unref(pageSize),
      pageModel: { ...unref(searchParams) }
    })
    let list: systemDt[] = res.data.pageModels || []
    list.map((item) => {
      item.usingStorage = parseFloat(item.usingStorage.toFixed(1))
      item.totalStorage = parseFloat(item.totalStorage.toFixed(1))
    })
    return {
      list: list,
      // list,
      total: res.data.totalCount
    }
  }
})

const { dataList, loading, total, pageSize, currentPage } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  {
    field: 'stationNo',
    label: t('site.stationNo')
  },
  {
    field: 'stationName',
    label: t('system.stationName')
  },
  {
    field: 'stationIp',
    label: t('system.stationIp')
  },
  {
    field: 'isOnline',
    label: t('system.isOnline'),
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElTag type={data.row.isOnline === 1 ? 'success' : 'danger'}>
              {data.row.isOnline === 1 ? t('site.online') : t('site.unLine')}
            </ElTag>
          </>
        )
      }
    }
  },

  {
    field: 'cpucontent',
    label: t('system.cpucontent'),
    slots: {
      default: (data) => {
        return (
          <ElProgress
            type="dashboard"
            percentage={data.row.cpucontent}
            v-slots={{
              default: () => (
                <div class="clome">
                  <span class="percentage-value">{data.row.cpucontent}%</span>
                  <span class="percentage-label">CPU状态</span>
                </div>
              )
            }}
          ></ElProgress>
        )
      }
    }
  },
  {
    field: 'memoryContent',
    label: t('system.memoryContent'),
    slots: {
      default: (data) => {
        return (
          <ElProgress
            type="dashboard"
            percentage={data.row.memoryContent}
            v-slots={{
              default: () => (
                <div class="clome">
                  <span class="percentage-value">{data.row.memoryContent}%</span>
                  <span class="percentage-label">内存状态</span>
                </div>
              )
            }}
          ></ElProgress>
        )
      }
    }
  },
  {
    field: 'space',
    label: t('system.space'),
    slots: {
      default: (data) => {
        return (
          <ElProgress
            type="dashboard"
            percentage={(data.row.usingStorage / data.row.totalStorage) * 100}
            v-slots={{
              default: () => (
                <div class="clome">
                  <span class="percentage-value">{data.row.usingStorage}G</span>
                  <span class="percentage-label">总容量:{data.row.totalStorage}G</span>
                </div>
              )
            }}
          ></ElProgress>
        )
      }
    }
  }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'stationName',
    label: t('system.stationName'),
    component: 'Input'
  }
  // {
  //   field: 'isOnline',
  //   label: t('system.isOnline'),
  //   component: 'Select',
  //   componentProps: {
  //     clearable: true,
  //     placeholder: '请选择'
  //   },
  //   optionApi: () => {
  //     return [
  //       { label: '在线', value: '1' },
  //       { label: '离线', value: '0' }
  //     ]
  //   }
  // }
])

const searchParams = ref({})
const setSearchParams = (data: any) => {
  searchParams.value = data
  getList()
}
</script>

<template>
  <ContentWrap>
    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />

    <Table
      height="600px"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :reserveIndex="true"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
<style>
.clome {
  display: flex;
  flex-direction: column;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 24px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 10px;
}
</style>
